<template>
  <div class="tree">
    <!-- 查询 -->
    <div class="search">
      <!-- 关键字搜索 -->
      <a-input-search
        class="input"
        placeholder="请输入搜索关键字"
        @search="onSearch"
      />
      <a-button
        v-if="selectMoudles == 'task'"
        type="primary"
        style="margin-left: 10px; height: 32px"
        size="small"
        @click="seachUser"
      >更多</a-button
      >
      <a-button
        v-if="selectMoudles == 'source'"
        type="primary"
        style="margin-left: 10px; height: 32px"
        size="small"
        @click="seachSource"
      >更多</a-button
      >
    </div>
    <!-- 树结构 -->
    <div class="content scroll">
      <div class="a-tree">
        <tree-detail
          :treeData="data"
          @onSelect="onSelect"
          @deleteSelect="deleteSelect"
          @onSelectLayer="onSelectLayer"
          @getLocation="onLocation"
        ></tree-detail>
      </div>
    </div>
  </div>
</template>
<script>
  import TreeDetail from './treeDetail.vue';
  import {mapState} from 'vuex';

  export default {
  components: {
    TreeDetail
  },
  data() {
    return {
      data: []
    };
  },
  watch: {
    selectMoudles(newData) {
      if (newData == 'analysis') return;
      this.data = [this.moudles[newData]];
    }
  },
  computed: {
    ...mapState(['moudles', 'selectMoudles'])
  },
  methods: {
    // 查询人员
    seachUser() {
      this.$emit('setSearchLayer', true);
    },
    seachSource() {
      this.$emit('setSearchSourceLayer', true);
    },
    // 搜索
    onSearch(val) {
      console.log(val, '111');
    },
    // 选择
    onSelect(val) {
      this.$emit('onSelect', {
        type: this.selectMoudles,
        data: val.selectKeys
      });
    },
    // 减少勾选
    deleteSelect(val) {
      this.$emit('deleteSelect', {
        type: this.selectMoudles,
        data: val.selectKeys
      });
    },
    // 选择名称展示图层
    onSelectLayer(val) {
      this.$emit('onSelectLayer', val);
    },
    onLocation(val) {
      this.$emit('onLocation', val);
    }
  },
  mounted() {
    this.data = [this.moudles[this.selectMoudles]];
  }
};
</script>
<style lang="less" scoped>
.tree {
  width: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  .search {
    width: 224px;
    height: auto;
    margin: 12px auto 0;
    display: flex;
    justify-content: flex-end;
    .input {
      width: 100%;
      ::v-deep .ant-input {
        padding-right: 0;
        box-sizing: border-box;
        background: transparent;
        color: #fff;
        border-radius: 0;
        border: 1px solid rgba(2, 224, 247, 0.5);
        ::placeholder {
          color: rgba(255, 255, 255, 0.3);
        }
        ::-moz-placeholder {
          color: rgba(255, 255, 255, 0.3);
        }
      }
      ::v-deep .anticon {
        color: rgba(255, 255, 255, 0.3);
      }
    }
  }
  .content {
    width: auto;
    height: 480px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 10px;
    margin-right: 10px;
    .a-tree {
    }
  }
}
</style>
